<template>
    <div class="apple">
        <div class="educationRight">
            <div class="img-box">
                <img src="@/assets/images/Apple-logo (2).png" />
                    <P>Microsoft</P>
                </div>
                <div class="text">
                    <h2>支持的产品：</h2>
                    <p class="tb">Suface(Pro9,Laptop5 Laptop Studio, Surface Go3)</p>
                </div>
                <div class="back">
                    <router-link to="/function/education/index">返回教育优惠首页</router-link>
                </div>

    </div>
    <div class="educationLeft">
        <h2>步骤</h2>
        <div class="item itemTitle">        2月1日到3月6日，开学季优惠升级，高校师生认证购 Surface 主机享6.4折起，可叠享至高24期免息，部分机型享1元加购好物优惠，还赠多重礼品。支持edu邮箱认证与学信网认证。</div>
        <div class="item item1">
            <span class="tit">1</span>
            <p>打开浏览器，进入https://www.microsoftstore.com.cn/student?Icid=StripBanner_student_202206 点击【立即认证】</p>
        <img src="@/assets/images/m1.png" />
        </div>
        <div class="item item1">
            <span class="tit">2</span>
            <p>选择手机或者微信登录。</p>
            <div class="item-img"> <img src="@/assets/images/m2.png" />
               </div>
        </div>
        <div class="item item1">
            <span class="tit">3</span>
            <p>选择我的专区，点击【我要认证】，然后选择【邮箱认证】</p>
            <div class="item-img"> <img src="@/assets/images/m11.png" />
                <img class="arrow" src="@/assets/images/arrow1.png" /> 
                <img src="@/assets/images/m3.png" />
                </div>
        </div>
        <div class="item item1 ">
            <span class="tit">4</span>
            <p>填写正确的信息，点击【提交】</p>
            <div class="item-img" style="justify-content: space-around;"> <img src="@/assets/images/m4.png" /> <img src="@/assets/images/m5.png" /></div>
        </div>
        <div class="item item1">
            <span class="tit">5</span>
            <p>登录邮箱，找到一封主题为【微软教育专区验证码】的邮件，输入验证码，完成验证。注意可能在垃圾邮件目录</p>
            <div class="item-img"> <img src="@/assets/images/m6.png" />

               
            </div>
        </div>
        <div class="item item1 ">
            <span class="tit">6</span>
            <p>输入验证码，提交认证，提示认证成功。如果认证未成功请检查之前的步骤是否正确</p>
            <div class="item-img" style="justify-content: space-around;" > <img src="@/assets/images/m7.png" /><img src="@/assets/images/m8.png" />
                
            </div>
        </div>
        <div class="item item1 ">
            <span class="tit">7</span>
            <p>重新打开第一步的教育优惠链接，完成登录，即可享受微软教育优惠政策</p>
            
        </div>
      
    </div>
    </div>
</template>
<style lang="less" scoped>
.apple{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    .educationRight{
        display: block;
            text-decoration: none;
            width: 181px;
            .img-box{
                text-align: center;
                width: 181px;
                height: 161px;
                box-sizing: border-box;
                padding-top:10px;
                // border:solid 1px #707070;
                // box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
                img{
                    width: 90px;
                    height: 90px;
                    margin-bottom: 10px;
                }
               p{
                    font-weight: 400;
                    font-size: 20px;
                    font-family: 'MicrosoftYaHeiLight';
                    color: rgba(56,23,129,1);
                }
            }
            .text{
            margin-top: 20px;
            h2{
                font-weight: 400;
                    font-size: 20px;
                    font-family: 'MicrosoftYaHeiLight';
                    color: rgba(56,23,129,1);
                    padding-bottom: 15px;
            }
            p{
                font-family: 'MicrosoftYaHei';
                font-weight: 400;
                font-size: 18px;
                color: rgba(56,23,129,1);
                margin-bottom: 5px;
                position: relative;
                padding-left: 15px;
               &::before{
                content: '';
                    position: absolute;
                    height: 8px;
                    width: 8px;
                    left: 0px;
                    top:50%;
                    margin-top:-5px;
                    border-radius: 50%;
                    background:rgba(56,23,129,1);
                }
                &.tb::before{
                    top: 15px;
                    
                }
            }
        }
        .back{
            margin-top: 60px;
            a{
                display: inline-block;
                text-decoration: none;
                color: #fff;
                font-size: 16px;
                background: #007BFF;
                width: 160px;
                height: 48px;
                line-height: 48px;
                border-radius: 5px;
                text-align: center;
            }
        }
 }
 .educationLeft{
    border-left: solid 1px #707070;
    padding-left: 20px;
    h2{
        font-family: 'MicrosoftYaHei-Bold';
        font-size: 26px;
        font-weight: bold;
        color: rgba(56,23,129,1);padding-bottom: 5px;
    }
    .item{
        font-family: 'MicrosoftYaHeiLight';
        font-size: 16px;
        font-weight: 400;
        width: 939px;
        min-height: 81px;
        box-sizing: border-box;
        color: rgba(56,23,129,1);
        padding: 10px 40px;
        border-radius: 6px;
        background: #E9ECEF;
        position: relative;
        &.itemTitle{
            margin-bottom: 40px;
        }
        &.item1{
            padding-top:30px;
            margin-bottom: 40px;
        }
        &.item2{
            display: flex;
            justify-content: space-between;
        }
        p{margin-bottom: 15px;}
        .tit{
            position: absolute;
            display: inline-block;
            width: 40px;
            height: 40px;
            color: #fff;
            background: #007BFF;
            text-align: center;
            line-height: 40px;
            font-family: 'Helvetica Neue';
            font-size: 20px;
            border-radius: 5px;
            left: 0px;
    top: -20px;
        }
        .item-img{
            display: flex;
            align-items: center;
            .arrow{
                margin: 0 30px;
            }
        }
    }
 }
}

</style>